<template>
  <view>
    <!-- 分类 -->
    <view class="category">
      <!-- 顶级分类 -->
      <view class="sup">
        <scroll-view scroll-y>
          <text v-for="item in enableDepartment" :key="item.id" :class="{ 'active': departmentId === item.id }"
            @click="handleCategoryClick(item.id)">
            {{ item.name }}
          </text>
        </scroll-view>
      </view>

      <!-- 子分类 -->

      <scroll-view scroll-y v-if="staffEnableByDepartmentId.length">
        <view class="sub" v-for="item in staffEnableByDepartmentId" :key="item.id">
          <view class="thumb">
            <image :src=item.image mode="aspectFill"></image>
          </view>
          <view class="children">
            <view class="title">{{ item.name }}</view>
            <view class="description">{{ item.description }}</view>
            <!-- <view class="people">预约人数</view> -->
            <view class="price">
              <text>￥{{ item.price }}</text>
              <view>
                <button class="book-button" @click="handleBookClick(item.id)">预约</button>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="no-data" v-else>
        <text>暂无数据</text>
      </view>

    </view>


  </view>
</template>

<script setup>
import {
  onLoad
} from "@dcloudio/uni-app";
import {
  getEnableDepartment,
  getStaffEnableByDepartmentId
} from '@/api/apis.js'
import {
  ref
} from "vue";

const enableDepartment = ref([])
const departmentId = ref(null);
const staffEnableByDepartmentId = ref([]);

onLoad(async (e) => {
  // console.log(e.departmentId);
  // 当有传递参数时，获取该部门的员工
  await getEnableDepartment().then(async res => {
    // console.log(res);
    enableDepartment.value = res.data;

    if (e.departmentId) {
      departmentId.value = e.departmentId; // 设置传递的部门ID
    } else {
      departmentId.value = enableDepartment.value[0].id; // 默认选中第一个启用的部门
    }

    // 获取该部门的员工
    await getStaffEnableByDepartmentId(departmentId.value).then(res => {
      // console.log(res);
      staffEnableByDepartmentId.value = res.data;
    });
  });
});

const handleCategoryClick = (id) => {
  departmentId.value = id; // 更新选中的 ID
  // console.log("handleCategoryClick", departmentId.value); // 打印被点击的 ID
  // 获取该部门的员工
  getStaffEnableByDepartmentId(departmentId.value).then(res => {
    // console.log(res);
    staffEnableByDepartmentId.value = res.data;
  });
};

// 预约按钮点击事件
const handleBookClick = (id) => {
  console.log("handleBookClick", id); // 打印被点击的 ID
  uni.showModal({
    title: '提示',
    content: '确定预约该医护人员吗？',
    success: (res) => {
      if (res.confirm) {
        console.log('用户点击确定');
        uni.navigateTo({
          url: '/pages/payment/payment?staffId=' + id
        });
      } else {
        console.log('用户点击取消');
      }
    }
  })
}

</script>

<style scoped lang="scss">
.category {
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;

  .sup {
    width: 200rpx;
    background-color: #f4f4f4;

    text {
      width: 100%;
      display: block;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 27rpx;
      color: #333;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      &.active {
        background-color: #FFF;
        color: $brand-theme-color;
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 8rpx;
          height: 60rpx;
          transform: translateY(-50%);
          background-color: $brand-theme-color;

          position: absolute;
          left: 0;
          top: 50%;
        }
      }
    }
  }

  .sub {
    display: flex;
    width: 100%;
    height: 220rpx;
    padding: 10rpx 20rpx;


    .thumb {
      width: 220rpx;
      height: 100%;
      margin-right: 10rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-color: #eee;
      }
    }

    .children {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .title {
        font-size: 36rpx;
        font-weight: bold;
      }

      .description {
        font-size: 28rpx;
        color: #666;
        display: -webkit-box;
        /* 采用多行文本的格式 */
        -webkit-box-orient: vertical;
        /* 垂直方向排列 */
        -webkit-line-clamp: 2;
        /* 最多显示 2 行 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      .people {
        font-size: 28rpx;
        color: #666;
      }


      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        text {
          font-size: 32rpx;
          color: #e4393c;
          /* 价格颜色 */
          margin-right: 80rpx;
        }

        button {
          background-color: #fcb300;
          /* 按钮背景色 */
          border: none;
          border-radius: 5px;
          font-size: 24rpx;
          color: #fff;
          display: flex;
          margin-left: auto;
        }
      }

    }
  }

  .no-data {
    width: 100%;

    text {
      font-size: 36rpx;
      font-weight: bold;
      /* 添加此行使文本加粗 */
      text-align: center;
      color: #999;
      padding: 200rpx;
    }
  }




}
</style>